<template>
  <div class="commission-rules">
    <div class="commission-rules__header">
      <h1 class="commission-rules__title">佣金规则</h1>
    </div>

    <!-- 佣金规则卡片组 -->
    <div class="rules-cards">
      <!-- 基础佣金比例 -->
      <div class="rule-card">
        <div class="rule-card__header">
          <div class="rule-card__icon">
            <i class="fas fa-percentage"></i>
          </div>
          <h2 class="rule-card__title">基础佣金比例</h2>
        </div>
        <div class="rule-card__content">
          <p>区域代理基础佣金比例为<strong>20%-40%</strong>，根据区域与业绩表现动态调整。</p>
          <div class="rate-table">
            <div class="rate-table__row rate-table__header">
              <div class="rate-table__cell">代理等级</div>
              <div class="rate-table__cell">佣金比例范围</div>
              <div class="rate-table__cell">升级条件</div>
            </div>
            <div class="rate-table__row">
              <div class="rate-table__cell">初级代理</div>
              <div class="rate-table__cell">20% - 25%</div>
              <div class="rate-table__cell">初始等级</div>
            </div>
            <div class="rate-table__row">
              <div class="rate-table__cell">中级代理</div>
              <div class="rate-table__cell">25% - 35%</div>
              <div class="rate-table__cell">月销售额 ≥ 10万元</div>
            </div>
            <div class="rate-table__row">
              <div class="rate-table__cell">高级代理</div>
              <div class="rate-table__cell">35% - 40%</div>
              <div class="rate-table__cell">月销售额 ≥ 30万元</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 佣金设置规则 -->
      <div class="rule-card">
        <div class="rule-card__header">
          <div class="rule-card__icon">
            <i class="fas fa-cog"></i>
          </div>
          <h2 class="rule-card__title">佣金设置规则</h2>
        </div>
        <div class="rule-card__content">
          <div class="rule-item">
            <div class="rule-item__title">分销商佣金</div>
            <div class="rule-item__desc">
              <p>区域代理可为旗下分销商设置佣金比例，范围为<strong>5%-15%</strong>。</p>
              <p>分销商佣金比例不得超过区域代理自身比例的50%。</p>
            </div>
          </div>
          <div class="rule-item">
            <div class="rule-item__title">特殊产品佣金</div>
            <div class="rule-item__desc">
              <p>特惠产品和促销产品可能有特殊佣金比例，以实际显示为准。</p>
              <p>部分高端产品可享受更高佣金比例，最高可达正常比例的1.5倍。</p>
            </div>
          </div>
          <div class="rule-item">
            <div class="rule-item__title">佣金调整</div>
            <div class="rule-item__desc">
              <p>佣金比例调整将于次月1日生效。</p>
              <p>系统会根据业绩自动评估并提示可能的佣金比例调整。</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 佣金计算方式 -->
      <div class="rule-card">
        <div class="rule-card__header">
          <div class="rule-card__icon">
            <i class="fas fa-calculator"></i>
          </div>
          <h2 class="rule-card__title">佣金计算方式</h2>
        </div>
        <div class="rule-card__content">
          <div class="calculation-method">
            <h3>订单佣金</h3>
            <div class="formula">
              <div class="formula__text">订单佣金 = 订单金额 × 区域代理佣金比例</div>
              <div class="formula__example">例：订单金额¥100，代理佣金比例30%，则佣金为¥30</div>
            </div>
          </div>
          <div class="calculation-method">
            <h3>推荐佣金</h3>
            <div class="formula">
              <div class="formula__text">推荐佣金 = 新分销商首月销售额 × 5%</div>
              <div class="formula__example">例：新分销商首月销售¥2000，则推荐佣金为¥100</div>
            </div>
          </div>
          <div class="calculation-method">
            <h3>促销佣金</h3>
            <div class="formula">
              <div class="formula__text">促销佣金 = 促销活动总销售额 × 促销佣金比例</div>
              <div class="formula__example">促销佣金比例由平台在活动期间指定</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 佣金结算周期 -->
      <div class="rule-card">
        <div class="rule-card__header">
          <div class="rule-card__icon">
            <i class="fas fa-calendar-alt"></i>
          </div>
          <h2 class="rule-card__title">佣金结算周期</h2>
        </div>
        <div class="rule-card__content">
          <div class="timeline">
            <div class="timeline-item">
              <div class="timeline-item__point"></div>
              <div class="timeline-item__content">
                <div class="timeline-item__title">订单完成</div>
                <div class="timeline-item__desc">订单交付完成并确认无退款风险</div>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-item__point"></div>
              <div class="timeline-item__content">
                <div class="timeline-item__title">待结算期（T+7）</div>
                <div class="timeline-item__desc">订单完成后进入7天的待结算期</div>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-item__point"></div>
              <div class="timeline-item__content">
                <div class="timeline-item__title">可提现状态</div>
                <div class="timeline-item__desc">待结算期结束后，佣金自动转为可提现状态</div>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-item__point"></div>
              <div class="timeline-item__content">
                <div class="timeline-item__title">申请提现</div>
                <div class="timeline-item__desc">代理可随时申请提现可提现佣金</div>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-item__point"></div>
              <div class="timeline-item__content">
                <div class="timeline-item__title">处理提现（T+3）</div>
                <div class="timeline-item__desc">平台审核通过后3个工作日内完成转账</div>
              </div>
            </div>
          </div>
          <div class="settlement-note">
            <i class="fas fa-info-circle"></i>
            <span>每月10日系统自动结算上月全部待结算佣金，无需手动操作</span>
          </div>
        </div>
      </div>

      <!-- 提现规则 -->
      <div class="rule-card">
        <div class="rule-card__header">
          <div class="rule-card__icon">
            <i class="fas fa-money-check-alt"></i>
          </div>
          <h2 class="rule-card__title">提现规则</h2>
        </div>
        <div class="rule-card__content">
          <div class="withdrawal-rules">
            <div class="withdrawal-rule">
              <div class="withdrawal-rule__icon"><i class="fas fa-hand-holding-usd"></i></div>
              <div class="withdrawal-rule__content">
                <div class="withdrawal-rule__title">最低提现金额</div>
                <div class="withdrawal-rule__desc">单笔提现金额不低于¥100</div>
              </div>
            </div>
            <div class="withdrawal-rule">
              <div class="withdrawal-rule__icon"><i class="fas fa-file-invoice-dollar"></i></div>
              <div class="withdrawal-rule__content">
                <div class="withdrawal-rule__title">手续费</div>
                <div class="withdrawal-rule__desc">提现手续费为提现金额的1%，最低¥1，最高¥50</div>
              </div>
            </div>
            <div class="withdrawal-rule">
              <div class="withdrawal-rule__icon"><i class="fas fa-clock"></i></div>
              <div class="withdrawal-rule__content">
                <div class="withdrawal-rule__title">处理时间</div>
                <div class="withdrawal-rule__desc">工作日09:00-18:00申请，最快3小时内到账；非工作时间申请，下一工作日处理</div>
              </div>
            </div>
            <div class="withdrawal-rule">
              <div class="withdrawal-rule__icon"><i class="fas fa-wallet"></i></div>
              <div class="withdrawal-rule__content">
                <div class="withdrawal-rule__title">提现方式</div>
                <div class="withdrawal-rule__desc">目前仅支持USDT提现，请务必确保填写正确的USDT地址</div>
              </div>
            </div>
            <div class="withdrawal-rule">
              <div class="withdrawal-rule__icon"><i class="fas fa-shield-alt"></i></div>
              <div class="withdrawal-rule__content">
                <div class="withdrawal-rule__title">安全限制</div>
                <div class="withdrawal-rule__desc">单日提现上限¥50,000；首次提现需完成身份验证</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 常见问题 -->
      <div class="rule-card">
        <div class="rule-card__header">
          <div class="rule-card__icon">
            <i class="fas fa-question-circle"></i>
          </div>
          <h2 class="rule-card__title">常见问题</h2>
        </div>
        <div class="rule-card__content">
          <div class="faq-list">
            <div class="faq-item">
              <div class="faq-item__question">
                <i class="fas fa-question"></i>
                <span>佣金比例如何提升？</span>
              </div>
              <div class="faq-item__answer">
                <p>提高销售业绩是提升佣金比例的主要方式。当月销售额达到指定标准后，系统将自动评估并可能提升您的佣金比例。您也可以联系平台客服申请评估提升佣金比例。</p>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-item__question">
                <i class="fas fa-question"></i>
                <span>订单退款后佣金如何处理？</span>
              </div>
              <div class="faq-item__answer">
                <p>如果订单在佣金结算前退款，则相应佣金将不予结算。如果订单在佣金已结算后退款，则会从下次待结算佣金中扣除相应金额。如待结算佣金不足，则会从可提现佣金中扣除。</p>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-item__question">
                <i class="fas fa-question"></i>
                <span>为什么我的分销商佣金比例设置被限制？</span>
              </div>
              <div class="faq-item__answer">
                <p>分销商佣金比例不能超过区域代理自身佣金比例的50%，这是为了确保合理的利润分配和激励结构。如您需要为特定分销商设置更高佣金，请联系平台客服申请特殊审批。</p>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-item__question">
                <i class="fas fa-question"></i>
                <span>如何查看佣金明细和提现记录？</span>
              </div>
              <div class="faq-item__answer">
                <p>您可以在佣金管理模块的"佣金记录"页面查看所有佣金明细，在"提现管理"页面查看所有提现记录。系统保留最近12个月的完整记录，更早的记录可联系客服获取。</p>
              </div>
            </div>
            <div class="faq-item">
              <div class="faq-item__question">
                <i class="fas fa-question"></i>
                <span>我可以将佣金转给其他代理或分销商吗？</span>
              </div>
              <div class="faq-item__answer">
                <p>目前系统不支持佣金直接转账给其他代理或分销商。您需要先提现到自己的USDT钱包，然后通过其他方式转账。我们计划在未来版本中添加内部转账功能。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 佣金规则页面组件
</script>

<style lang="scss" scoped>
.commission-rules {
  padding: 24px;

  &__header {
    margin-bottom: 24px;
  }

  &__title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    position: relative;
    padding-left: 16px;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background-color: #FF4757;
      border-radius: 2px;
    }
  }
}

.rules-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 600px), 1fr));
  gap: 24px;
}

.rule-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  &__header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
  }

  &__icon {
    width: 36px;
    height: 36px;
    background-color: #4a6cf7;
    color: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;

    i {
      font-size: 16px;
    }
  }

  &__title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  &__content {
    padding: 20px;
  }
}

// 基础佣金比例卡片样式
.rate-table {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid #eee;

  &__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    
    &:not(:last-child) {
      border-bottom: 1px solid #eee;
    }
    
    &.rate-table__header {
      background-color: #f8f9fa;
      font-weight: 600;
    }
  }

  &__cell {
    padding: 12px 16px;
    font-size: 14px;
    
    &:not(:last-child) {
      border-right: 1px solid #eee;
    }
  }
}

// 佣金设置规则卡片样式
.rule-item {
  padding: 12px 0;
  
  &:not(:last-child) {
    border-bottom: 1px dashed #eee;
  }
  
  &__title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
  }
  
  &__desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    
    p {
      margin: 0 0 6px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 佣金计算方式卡片样式
.calculation-method {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px;
  }
}

.formula {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
  
  &__text {
    font-weight: 600;
    margin-bottom: 8px;
  }
  
  &__example {
    font-size: 13px;
    color: #666;
  }
}

// 佣金结算周期卡片样式
.timeline {
  position: relative;
  padding-left: 20px;
  
  &::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 6px;
    width: 2px;
    background-color: #4a6cf7;
  }
}

.timeline-item {
  position: relative;
  padding-bottom: 16px;
  
  &:last-child {
    padding-bottom: 0;
  }
  
  &__point {
    position: absolute;
    left: -20px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #4a6cf7;
    background-color: #fff;
  }
  
  &__title {
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  &__desc {
    font-size: 14px;
    color: #666;
  }
}

.settlement-note {
  margin-top: 16px;
  background-color: #FFF9C4;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  
  i {
    color: #FFC107;
    margin-right: 8px;
    font-size: 16px;
  }
  
  span {
    font-size: 14px;
    color: #333;
  }
}

// 提现规则卡片样式
.withdrawal-rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.withdrawal-rule {
  display: flex;
  align-items: flex-start;
  
  &__icon {
    width: 36px;
    height: 36px;
    background-color: rgba(74, 108, 247, 0.1);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    
    i {
      color: #4a6cf7;
      font-size: 16px;
    }
  }
  
  &__title {
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  &__desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }
}

// 常见问题卡片样式
.faq-item {
  padding: 16px 0;
  
  &:not(:last-child) {
    border-bottom: 1px solid #eee;
  }
  
  &__question {
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    
    i {
      color: #4a6cf7;
      margin-right: 8px;
      font-size: 14px;
    }
  }
  
  &__answer {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    padding-left: 22px;
    
    p {
      margin: 0;
    }
  }
}

// 响应式布局调整
@media (max-width: 768px) {
  .rules-cards {
    grid-template-columns: 1fr;
  }
  
  .rate-table, 
  .rate-table__row {
    display: block;
  }
  
  .rate-table__cell {
    display: block;
    padding: 10px;
    
    &:not(:last-child) {
      border-right: none;
      border-bottom: 1px solid #eee;
    }
  }
  
  .withdrawal-rules {
    grid-template-columns: 1fr;
  }
}
</style> 